<template>
  <div>
    <div>
      <el-row>
        <el-button class="adduser" @click="dialogFormVisible" type="primary"
          >新增</el-button
        >
        <el-button class="edituser" type="success">修改</el-button>
        <el-button class="deluser" type="danger">删除</el-button>
      </el-row>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="用户编号" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="用户名称" width="120">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="department" label="部门" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="phonenum" label="手机号码" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="userstate" label="状态" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="creationtime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="useroper" label="操作" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <addusers v-show="dialog == true"></addusers>
  </div>
</template>

<script>
import addusers from "./addusers.vue";
export default {
  data() {
    return {
      dialog: false,
      tableData: [
        {
          user_id: "10001",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          user_id: "10002",
          name: "王小梅",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
    };
  },
  components: {
    addusers,
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dialogFormVisible() {
      this.dialog = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-top: 30px;
  .adduser,
  .edituser,
  .deluser {
    width: 65px;
    height: 35px;
  }
}
</style>